<template>
  <el-dialog v-model="visible" width="700px" :title="title" append-to-body destroy-on-close>
    <CodeEditor :value="content" />
  </el-dialog>
</template>

<script setup>
  import { computed, defineProps, defineEmits } from 'vue';
  import { CodeEditor } from '@/components/CodeEditor';

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    content: {
      type: String,
      default: '',
    },
  });

  const emits = defineEmits(['update:modelValue']);

  const visible = computed({
    set(val) {
      emits('update:modelValue', val);
    },
    get() {
      return props.modelValue;
    },
  });
</script>

<style scoped lang="scss"></style>
